<template>
    <div>
        <Example title="a标签打开">
            <div>
                <a href="/static/test02.pdf">打开pdf</a>
            </div>
        </Example>
        <Example title="iframe打开">
            <iframe src="/static/test02.pdf" width="100%" height="400px">
                This browser does not support PDFs. Please download the PDF to
                view it: <a href="/static/test02.pdf">Download PDF</a>
            </iframe>
        </Example>
        <Example title="embed打开">
            <embed
                src="/static/test02.pdf"
                type="application/pdf"
                width="100%"
                height="400px"
            />
        </Example>
        <Example title="object打开">
            <object
                data="/static/test02.pdf"
                type="application/pdf"
                width="100%"
                height="400px"
            >
                This browser does not support PDFs. Please download the PDF to
                view it: <a href="/index.pdf">Download PDF</a>
            </object>
        </Example>

        <Example title="vue-pdf打开">
            <a-button @click="changePdfPage(0)">上一页</a-button>
            {{ currentPage }} / {{ pageCount }}
            <a-button @click="changePdfPage(1)">下一页</a-button>
            <pdf
                :src="url"
                :page="currentPage"
                @num-pages="pageCount = $event"
                @page-loaded="currentPage = $event"
            ></pdf>
        </Example>
    </div>
</template>

<script>
import pdf from "vue-pdf";

export default {
    components: {
        pdf,
    },
    data() {
        return {
            url: `/static/test02.pdf`,
            currentPage: 0,
            pageCount: 0,
        };
    },
    methods: {
        changePdfPage(val) {
            if (val === 0 && this.currentPage > 1) {
                this.currentPage--;
            }
            if (val === 1 && this.currentPage < this.pageCount) {
                this.currentPage++;
            }
            console.log(this.currentPage);
            console.log(this.pageCount);
        },
    },
};
</script>
